<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/jquery-3.7.1.min.js"></script>
  <style>
        .content {
            width: 90%;
            margin: 20px auto;
        }
        * {
            margin: 0;
            padding: 0;
        }
        .header, .coBodyItem {
            display: flex;
            align-items: center;
        }
        .header {
            background-color: #f8f8f9;
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
        }
        .coBodyItem {
            padding: 20px 5px;
            border-bottom: 1px solid #ccc;
        }
        .headerItem, .item {
            text-align: center;
            word-break: break-all;
        }
        .headerItem, .item {
        flex: 1; /* 使所有项等宽 */
        }
        .coBodyItem .item {
        flex: 1; /* 使所有项等宽 */
        }
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
        }
        .mask {
            background-color: #000;
            opacity: .8;
            width: 100%;
            height: 100%;
        }
        .modelBody {
            width: 40%;
            position: absolute;
            z-index: 9;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            border-radius: 10px;
        }
        .formItem {
            display: flex;
            margin: 15px 0;
            align-items: center;
        }
        label {
            width: 120px;
        }
        input {
            flex: 1;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        }
        .btn {
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin:0 20px;
            transition: .1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;

        }
        .primary {
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
        }
        .danger {
            color: #fff;
            background-color: #f56c6c;
            border-color: #f56c6c;
        }
        .btnBox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .item .btn {
            margin: 5px 0;
        }
    </style>
</head>
<body>
<div class="modal"  id="addCodeModal">
  <div class="mask">
  </div>
  <div class="modelBody">
    <div>新增溯源码</div>
    <div class="formItem"><label>钱包私钥:</label> <input id="codePrivateKey" name="codePrivateKey" aria-label="钱包私钥 "  placeholder="钱包私钥"></div>
    <div class="btnBox"><button class="btn danger" onclick="closeCodeModal()">取消</button><button class="btn primary" onclick="addCode()">提交</button></div>
  </div>
</div>

<div class="modal"  id="jumpCodeModal">
  <div class="mask">
  </div>
  <div class="modelBody">
    <div>查看溯源码</div>
    <div class="formItem"><label>钱包私钥:</label> <input id="jumpCodePrivateKey" name="codePrivateKey" aria-label="钱包私钥 "  placeholder="钱包私钥"></div>
    <div class="btnBox"><button class="btn danger" onclick="closeJumpCodeModal()">取消</button><button class="btn primary" onclick="jumpCode()">查看</button></div>
  </div>
</div>

<div class="content">
  <div class="header">
    <div class="headerItem">id</div>
    <div class="headerItem">productName</div>
    <div class="headerItem">productDepa</div>
    <div class="headerItem">productDest</div>
    <div class="headerItem">address</div>
    <div class="headerItem">createTime</div>
    <div class="headerItem">操作</div>
  </div>
  <div class="coBody">
  </div>
</div>

</body>




<script>
    let productId

    function showCodeModal(id) {
        $('#addCodeModal').show()
        productId = id
    }

    function jumpCodeModal(id) {
        $('#jumpCodeModal').show()
        productId = id
    }
    function createaddModal() {
        $('#addModal').show()
    }
    function  init() {
        $.ajax({
            url: '/queryProducts', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            success: function(data) {
                // 在这里处理从服务器返回的数据
                const { o } = data
                let  html = ''
                o.forEach(item=> {
                    const str = `
                        <div class="coBodyItem">
                        <div class="item">${item.id}</div>
                        <div class="item">${item.productName}</div>
                        <div class="item">${item.productDepa}</div>
                        <div class="item">${item.productDest}</div>
                        <div class="item">${item.address}</div>
                        <div class="item">${item.createTime}</div>
                        <div class="item"><button class="btn warning" onclick="showCodeModal(${item.id})">新增溯源码</button><button class="btn primary" onclick="jumpCodeModal(${item.id})">查看溯源码</button></div>
                    </div>`
                    html += str
                })

                $('.coBody').html(html)
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
    }
    function showProductModal() {
        $('#addProductModal').show()
    }
    let loading = false

    function handleConfirm() {
        if(loading) return
        loading = true
        const productName = $('#productName').val()
        const productDepa = $('#productDepa').val()
        const productDest = $('#productDest').val()
        const privateKey = $('#privateKey').val()
        const address = $('#address').val()
        $.ajax({
            url: '/product/add', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            contentType: 'application/json',
            data: JSON.stringify({
                productName,
                productDepa,
                productDest,
                privateKey,
                address
            }),
             success: function(data) {
                // 在这里处理从服务器返回的数据
                const { code, msg } = data
                if(code === '1') {
                    closeProductModal()
                    init()
                    alert('新增成功')
                } else  {
                    alert(msg)
                }
                loading = false
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
                loading = false
            }
        });
    }


    let codeLoading = false
    function addCode () {
        if(codeLoading) return
        codeLoading = true
        const codePrivateKey = $('#codePrivateKey').val()
        $.ajax({
            url: '/createCode', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            contentType: 'application/json',
            data: JSON.stringify({
                id: productId,
                privateKey:codePrivateKey
            }),
            success: function (data) {
                // 在这里处理从服务器返回的数据
                const {code, msg} = data
                if (code === '1') {
                    closeCodeModal()
                    alert('新增成功')
                } else {
                    alert(msg)
                }
                codeLoading = false
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
                codeLoading = false
            }
        })
    }
    function  closeCodeModal() {
        $('#codePrivateKey').val('')
        $('#addCodeModal').hide()
    }
    function  closeJumpCodeModal() {
        $('#jumpCodePrivateKey').val('')
        $('#jumpCodeModal').hide()
    }
    function  jumpCode() {
        const privateKey = $('#jumpCodePrivateKey').val()
        window.location.href = `/code?id=${productId}&privateKey=${privateKey}`
    }

    init()

</script>

</html>